import React from 'react'
import { connect } from 'react-redux'
import Style from './index.scss'
import Avatar from '@components/avatar'

@connect(store => {
  return {
    userInfo: store.userInfo
  }
})
class Recommend extends React.Component {
  render() {
    const avatarStyle = {
      width: '50px',
      height: '50px'
    }
    const avatarStyle2 = {
      width: '40px',
      height: '40px'
    }
    const usernameStyle = {
      fontSize: '14px'
    }
    const abstractStyle = {
      fontSize: '14px'
    }
    const { followList, userInfo, setFollowState, togglePostTopic } = this.props
    return (
      <div className={`${Style.recommend}`} ref="recommend">
        <header className="header">
          <Avatar
            userInfo={userInfo}
            avatarStyle={avatarStyle}
            usernameStyle={usernameStyle}
            abstractStyle={abstractStyle}
          />
        </header>
        <section className="post" onClick={togglePostTopic}>
          发帖
        </section>
        <section className="container">
          <nav className="title">推荐关注</nav>
          {followList.length === 0 ? (
            <p className="notice">暂无推荐</p>
          ) : (
            <ul className="friend_photo">
              {followList.map((item, index) => (
                <li className="list" key={index}>
                  <Avatar
                    userInfo={item}
                    avatarStyle={avatarStyle2}
                    usernameStyle={{ width: '120px', fontSize: '12px' }}
                    abstractStyle={{ width: '120px', fontSize: '12px' }}
                  />
                  {item.hasFollow ? (
                    <span
                      onClick={() => {
                        setFollowState(index, false)
                      }}
                    >
                      取消关注
                    </span>
                  ) : (
                    <span
                      className="follow"
                      onClick={() => {
                        setFollowState(index, true)
                      }}
                    >
                      关注
                    </span>
                  )}
                </li>
              ))}
            </ul>
          )}
        </section>
      </div>
    )
  }
}

export default Recommend
